<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 305px;
            margin: 0 auto;
            background-color: aqua;
            position: relative;
        }

        img {
            width: 560px;
            height: 305px;
            position: relative;
            display: none;
        }
        img:nth-child(1){
            display: block;
        }
        /* span:nth-child(1){
             display: inline-block;
             width: 40px;
             height: 40px;
             text-align: center;
             font-size: 50px;
             float: left;
       }
      span:nth-child(2){
        display: inline-block;
             width: 40px;
             height: 40px;
             text-align: center;
             font-size: 40px;
             float: right;
      } */
      .arrow{
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -20px;
            display: flex;
            width: 100%;
            justify-content: space-between;
        }
        .arrow span{
            display: inline-block;
            width: 40px;
            height: 40px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            border: 1px solid red;
            cursor: pointer;
        }
      .point{
            clear: both;
            position: absolute;
            bottom: 5px;
            right: 10px;
            display: flex;
        }
        .point li{
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #fff;
            /* display: inline-block; */
            margin: 0 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box2">
            <img src="111.png">
            <img src="112.jpg">
            <img src="113.jpg">
            <!-- <span><> </span> -->
        </div>
        <div class="arrow"> 
            <span>&lt;</span>
            <span>&gt;</span>
             </div>
             <div class="point">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
             </div>
    </div>
    <script>
        var l_span=document.getElementsByTagName('span')[0];
        var r_span=document.getElementsByTagName('span')[1];
        var img=document.getElementsByTagName('img');
        var num=0;
        var oLi=document.getElementsByTagName('li');
        r_span.onclick =function(){
          for(let i=0;i<img.length;i++){
            img[i].style.display = "none";
            oLi[i].style.background="#fff";
          }
          num++;
          if (num>2){
            num=0;
          }
          img[num].style.display="block";
          oLi[num].style.background="red";
        }
        var l_span=document.getElementsByTagName('span')[0];
        var r_span=document.getElementsByTagName('span')[1];
        var img=document.getElementsByTagName('img');
        var num=0;
        l_span.onclick =function(){
          for(let i=0;i<img.length;i++){
            img[i].style.display = "none";
          }
          if (num<0){
            num=2;
          }
          img[num].style.display="block";
          num--;
        }
        oLi[0].style.background="red";
        for(let i=0;i<length;i++){
          oLi[i].onmousemove=function(){
            for(let index=0;index<img.length;index++){
              img[index].style.display="none";
              oLi[index].style.background="blue";
             }
             img[i].style.display="block";
             oLi[i].style.background="blue";
             num=i;
          }
        }

    </script>
</body>

</html>